/* SocNet custom styles */

/* ── Theme: black canvas, green text, cyan primary / amber secondary ────────
   Overrides Pico's dark palette (loaded before this file, so these win). */
[data-theme="dark"] {
  --pico-background-color: #000000;
  --pico-color: #7ee787;                 /* body text — soft, readable green */
  --pico-h1-color: #cdf7d4;
  --pico-h2-color: #cdf7d4;
  --pico-h3-color: #b9f6c0;
  --pico-h4-color: #b9f6c0;
  --pico-h5-color: #a6f0b0;
  --pico-h6-color: #a6f0b0;
  --pico-muted-color: #5f8a66;           /* meta / secondary text */
  --pico-muted-border-color: #1c2a20;
  --pico-border-color: #223027;

  --pico-card-background-color: #0a0f0b;
  --pico-card-border-color: #1c2a20;
  --pico-card-sectioning-background-color: #0a0f0b;

  /* Primary = cyan/sky (links, primary buttons) */
  --pico-primary: #38bdf8;
  --pico-primary-hover: #7dd3fc;
  --pico-primary-focus: rgba(56, 189, 248, 0.3);
  --pico-primary-background: #38bdf8;
  --pico-primary-hover-background: #0ea5e9;
  --pico-primary-border: #38bdf8;
  --pico-primary-hover-border: #0ea5e9;
  --pico-primary-inverse: #001722;       /* text on cyan buttons */
  --pico-primary-underline: rgba(56, 189, 248, 0.5);

  /* Secondary = amber/gold (clearly distinct accent) */
  --pico-secondary: #fbbf24;
  --pico-secondary-hover: #fcd34d;
  --pico-secondary-focus: rgba(251, 191, 36, 0.3);
  --pico-secondary-background: #fbbf24;
  --pico-secondary-hover-background: #f59e0b;
  --pico-secondary-border: #fbbf24;
  --pico-secondary-hover-border: #f59e0b;
  --pico-secondary-inverse: #1a1300;     /* text on amber buttons */

  /* Form fields */
  --pico-form-element-background-color: #0a0f0b;
  --pico-form-element-border-color: #26352a;
  --pico-form-element-color: #cdf7d4;
  --pico-form-element-placeholder-color: #4d6b53;
  --pico-form-element-active-background-color: #0a0f0b;
  --pico-form-element-active-border-color: #38bdf8;
  --pico-form-element-focus-color: rgba(56, 189, 248, 0.3);

  --pico-code-background-color: #0d140e;
  --pico-code-color: #7ee787;
  --pico-text-selection-color: rgba(56, 189, 248, 0.3);
}

/* Professional layout touches */
body > nav.container {
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: 1.25rem;
}
main.container { padding-top: 0.5rem; }
kbd {
  background: #14201a;
  color: #9be2a3;
  border: 1px solid #2a3d30;
  border-radius: 4px;
  padding: 0.05rem 0.4rem;
  font-size: 0.82em;
}


.person-card {
  padding: 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  cursor: pointer;
  transition: background-color 0.15s;
}

.person-card:hover {
  background-color: var(--pico-card-background-color);
}

.person-card h4 {
  margin-bottom: 0.25rem;
}

.person-card .meta {
  font-size: 0.85rem;
  color: var(--pico-muted-color);
}

.dossier-field {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.dossier-field .label {
  font-weight: 600;
  min-width: 120px;
}

.relationship-group {
  margin-bottom: 1rem;
}

.relationship-group h4 {
  text-transform: capitalize;
  margin-bottom: 0.5rem;
  color: var(--pico-primary);
}

.relationship-group ul {
  list-style: none;
  padding-left: 0;
}

.relationship-group li {
  padding: 0.25rem 0;
}

.tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.8rem;
  background-color: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.actions button {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.network-chip {
  font-weight: normal;
  color: var(--pico-muted-color);
  margin-left: 0.25rem;
}

.network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.network-card {
  text-align: left;
  padding: 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  color: inherit;
  cursor: pointer;
}

.network-card:hover {
  border-color: var(--pico-primary);
}

.network-card h4 {
  margin-bottom: 0.25rem;
}

.network-card .meta {
  font-size: 0.8rem;
  color: var(--pico-muted-color);
  margin: 0;
}