body {
  font-family: 'Courier New', monospace;
  margin: 0;
  padding: 0;
  background-color: #121212;
  color: #e0e0e0;
}

h2,h3{margin:10px 0;color:#f5f5f5;}

#auth{
  padding:20px;
  background-color:#1e1e1e;
  border-bottom:2px solid #333;
}
#auth input,#auth button{
  margin:5px 0;display:block;width:100%;padding:8px;border-radius:4px;border:1px solid #555;background-color:#222;color:#e0e0e0;
}
#auth button{cursor:pointer;background-color:#007acc;border:none;}
#auth button:hover{background-color:#005fa3;}

/* Status Graph */
#status-graph-container{padding:10px;}
#status-graph{display:flex;gap:5px;height:20px;margin-top:5px;}
.status-bar{height:100%;border-radius:4px;}
.status-bar.idea{background-color:#9e9e9e;width:0;}
.status-bar.planning{background-color:#ff9800;width:0;}
.status-bar.inprogress{background-color:#2196f3;width:0;}
.status-bar.paused{background-color:#ff5722;width:0;}
.status-bar.completed{background-color:#4caf50;width:0;}

/* Dashboard Layout */
.dashboard{display:flex;gap:20px;padding:20px;}
.left-panel{flex:1;}
#project-form{background-color:#1e1e1e;padding:15px;border-radius:8px;border:1px solid #333;}
#project-form input,#project-form textarea,#project-form select,#project-form button{margin:5px 0;width:100%;padding:8px;border-radius:4px;border:1px solid #555;background:#222;color:#e0e0e0;}
#project-form button{background-color:#007acc;border:none;cursor:pointer;}
#project-form button:hover{background-color:#005fa3;}

.right-panel{flex:2;display:flex;flex-direction:column;gap:20px;}
.projects-columns{display:flex;gap:20px;}
.column{flex:1;background-color:#1e1e1e;padding:10px;border-radius:8px;border:1px solid #333;min-height:200px;}
.column h3{margin-top:0;}

/* Project bubbles */
.project-bubble{background-color:#262626;border-radius:10px;padding:12px;margin-bottom:10px;border:1px solid #444;cursor:pointer;}
.project-bubble h4{margin:0 0 5px 0;font-size:1.1em;color:#00d0ff;}
.project-bubble p{margin:3px 0;font-size:0.95em;color:#ccc;}
.project-bubble select,.project-bubble button,.notes-section textarea,.notes-section button{margin-top:5px;padding:5px;border-radius:4px;background-color:#333;color:#e0e0e0;border:1px solid #555;}
.project-bubble select{width:100%;}
.project-bubble button{cursor:pointer;background-color:#ff5555;border:none;}
.project-bubble button:hover{background-color:#ff0000;}
.notes-section textarea{width:100%;margin-bottom:5px;}

/* Responsive */
@media(max-width:768px){.dashboard{flex-direction:column;}.projects-columns{flex-direction:column;}.column{width:100%;}}

/* =========================
   Status Bar Graph (Top)
========================= */
#status-graph-wrap{
  padding: 14px 20px;
  border-bottom: 1px solid #2a2a2a;
}

.status-legend{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 10px;
}

.status-legend span{
  display:flex;
  align-items:center;
  gap:6px;
}

.dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:999px;
}

.dot.idea{ background:#9e9e9e; }
.dot.planning{ background:#ff9800; }
.dot.inprogress{ background:#2196f3; }
.dot.paused{ background:#ff5722; }
.dot.completed{ background:#4caf50; }

#status-graph{
  display:flex;
  height: 16px;
  border-radius: 10px;
  overflow:hidden;
  border: 1px solid #333;
  background:#1b1b1b;
}

#status-graph .seg{ flex: 0; min-width: 2px; }
#status-graph .seg.idea{ background:#9e9e9e; }
#status-graph .seg.planning{ background:#ff9800; }
#status-graph .seg.inprogress{ background:#2196f3; }
#status-graph .seg.paused{ background:#ff5722; }
#status-graph .seg.completed{ background:#4caf50; }

/* =========================
   Notes box bigger + comfy
========================= */
.project-bubble .notes-textarea{
  width: 100%;
  min-height: 170px;      /* bigger by default */
  resize: vertical;       /* you can pull it taller */
  padding: 10px;
  box-sizing: border-box;
  border-radius: 8px;
  line-height: 1.35;
  overflow: auto;
}

.project-bubble details summary{
  cursor: pointer;
  user-select:none;
  margin: 8px 0;
}

.status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.status-row span{
  font-size: 12px;
  opacity: 0.85;
}
/* ===== Status graph (always visible) ===== */
#status-graph-wrap {
  padding: 14px 20px;
  border-bottom: 1px solid #2a2a2a;
  background: #121212;
}

.status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  margin-bottom: 10px;
  opacity: 0.9;
}

.status-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.dot.idea { background: #9e9e9e; }
.dot.planning { background: #ff9800; }
.dot.inprogress { background: #2196f3; }
.dot.paused { background: #ff5722; }
.dot.completed { background: #4caf50; }

#status-graph {
  width: 100%;
  height: 18px;                 /* make it obvious */
  display: flex;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #333;
  background: #1b1b1b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
}

#status-graph .seg {
  height: 100%;
  min-width: 0;                 /* let flex decide */
}

#status-graph .seg.idea { background: #9e9e9e; }
#status-graph .seg.planning { background: #ff9800; }
#status-graph .seg.inprogress { background: #2196f3; }
#status-graph .seg.paused { background: #ff5722; }
#status-graph .seg.completed { background: #4caf50; }

.status-columns{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.status-columns .column{
  flex: 1 1 260px;
  min-width: 260px;
}

.bubble-title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.tag{
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #444;
  background: #1b1b1b;
  opacity: 0.95;
}

/* --- Image thumbnails: consistent + neat --- */
.image-thumb{
  width: 100%;
  height: 130px;       /* adjust if you want taller/shorter */
  object-fit: cover;   /* fills nicely without distortion */
  display: block;
  cursor: zoom-in;
}

/* Optional: make image cards feel tighter */
.image-card{
  position: relative;
  border: 1px solid #3a3a3a;
  border-radius: 12px;
  overflow: hidden;
  background: #171717;
}

/* --- Modal viewer --- */
#imgModal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  z-index: 9999;
}

#imgModal.open{ display: flex; }

#imgModal .modal-inner{
  max-width: min(1100px, 96vw);
  max-height: 92vh;
  display: grid;
  gap: 10px;
}

#imgModal img{
  max-width: 100%;
  max-height: 78vh;
  border-radius: 12px;
  object-fit: contain;
  background: #0f0f0f;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

#imgModal .modal-caption{
  font-size: 13px;
  opacity: 0.9;
  text-align: center;
}

#imgModal .modal-hint{
  font-size: 12px;
  opacity: 0.65;
  text-align: center;
}
/* ---------- App header ---------- */
#appHeader{
  position: sticky;
  top: 0;
  z-index: 100;
  background: #121212;
  padding: 10px 14px;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  justify-content: flex-start;
}

#logoutBtnTop{
  background: #1e1e1e;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
}

#logoutBtnTop:hover{
  background: #292929;
}