/* style.css — Redesign for Black UI with High Contrast */

:root{
  --bg-dark:#0a0a0a; /* Deep black background */
  --bg-light:#151515; /* Lighter background for panels/cards */
  --card-border:#2e2e2e;
  --text-primary:#ffffff;
  --muted:#8b98a3;
  --accent:#18b36e; /* Keep green accent for buttons/highlights */
}

body,html{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}

/* 1. Global Background Change */
.bg-gradient{
  /* Replace the previous green gradient with a simple deep black */
  background: var(--bg-dark);
  color: var(--text-primary);
}

.app-container{max-width:1100px;margin:28px auto;padding:18px;}

/* Header elements */
.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.brand h1{margin:0;font-size:20px;letter-spacing:0.4px;}
.brand .tag{font-size:12px;color:var(--muted);margin-top:4px;}

/* Main grid - no changes needed */
.main-grid{display:grid;grid-template-columns:1fr 1fr 420px;gap:18px;}
@media (max-width:980px){ .main-grid{grid-template-columns:1fr; } }

/* 2. Panels: Make them opaque black/darker gray for contrast */
.panel{
  background:var(--bg-light); /* Darker panel background */
  border-radius:12px;
  padding:14px;
  min-height:160px;
  border:1px solid var(--card-border); /* Add a subtle border */
}
.panel h2{margin:0 0 12px 0;font-size:15px;color:var(--text-primary);}
.muted{color:var(--muted);font-size:12px;margin-left:8px}

/* 3. Peers grid: Improve contrast on cards */
.peers-grid{display:flex;flex-wrap:wrap;gap:12px;}
.peer-card{
  width:120px;padding:12px;border-radius:12px;
  background:var(--bg-dark); /* Deeper background for the card */
  text-align:center;
  color:var(--text-primary);
  border:1px solid var(--card-border);
  cursor:pointer;
  transition:transform .12s,box-shadow .12s;
}
.peer-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,0.5);}
.peer-card.selected{border-color:var(--accent); box-shadow:0 0 10px rgba(24,179,110,0.5);} /* Highlight selected peer */
.peer-card .name{font-weight:700;margin-top:8px;font-size:13px;}
.peer-card .meta{font-size:11px;color:var(--muted);margin-top:4px;}
.peer-card.badged{box-shadow:0 6px 18px rgba(24,179,110,0.3)} /* Keep badge color */

/* 4. File card: Increase visibility */
.file-panel .file-card, .file-card{
  border-radius:10px;padding:12px;
  background:var(--bg-dark); /* Ensure file card is dark */
  cursor:pointer;
  border:1px dashed var(--card-border);
  display:flex;align-items:center;justify-content:center;height:120px;
}
.file-label{color:var(--muted);font-size:14px;text-align:center;}
.controls{display:flex;gap:8px;margin-top:12px;align-items:center;}
.target-select{
  flex:1;padding:10px;border-radius:8px;
  border:1px solid var(--card-border);
  background:var(--bg-dark); /* Dark input field */
  color:var(--text-primary);
}
.target-select option {background:var(--bg-dark); color:var(--text-primary);} /* Ensure dropdown options are readable */

/* 5. Buttons: Keep primary green, adjust outline for dark theme */
.btn{background:transparent;border:1px solid var(--card-border);padding:8px 12px;border-radius:8px;color:var(--text-primary);cursor:pointer}
.btn-primary{background:linear-gradient(90deg,var(--accent),#1db57a);border:none; color:#0a0a0a;} /* Black text on bright button */
.btn-outline{background:transparent;border:1px solid var(--card-border); color:var(--text-primary);}

/* 6. Status & Logs: Essential for debugging, make logs highly readable */
.status{margin-top:12px;color:var(--text-primary);font-size:13px}
.log-box{
  margin-top:12px;max-height:220px;overflow:auto;
  background:#000000; /* Pure black log background for highest contrast */
  padding:8px;border-radius:8px;
  color:#f7fff7; /* Very light text */
  border:1px solid var(--card-border);
}
.log-box div:nth-child(even) { background:rgba(255, 255, 255, 0.03); padding: 1px 0; } /* Subtle zebra striping */

/* Modal: Make modal popup bright against dark backdrop */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.8); /* Darker, slightly more transparent backdrop */
  display:flex;align-items:center;justify-content:center;z-index:9999;
}
.modal{
  background:var(--text-primary); /* White modal for contrast */
  color:var(--bg-dark); /* Black text inside the modal */
  padding:18px;border-radius:12px;max-width:420px;width:92%;
  box-shadow:0 18px 60px rgba(0,0,0,0.5);
}
.modal h3{margin:0 0 8px 0}
.modal .muted{color:#5b6b67}
.modal .actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}
.btn-accept{background:var(--accent);color:var(--bg-dark);border:none;padding:10px 14px;border-radius:8px}
.btn-decline{background:#eee;border:none;padding:10px 14px;border-radius:8px; color:var(--bg-dark);}

/* small helpers */
.hint{padding:10px;color:var(--muted);font-size:13px;text-align:center;margin-top:8px}
.footer{margin-top:18px;color:var(--muted);font-size:13px;text-align:center}