/* log.css (REPLACE ENTIRE FILE) */

/* --- Overlay --- */
.log-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  display: none; justify-content: center; align-items: center;
  z-index: 9999; transition: opacity .25s ease;
}
.log-overlay.visible { display: flex; }
.log-modal {
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  border-radius: 20px; width: 92%; max-width: 1000px; max-height: 84vh;
  padding: 20px 22px; display: flex; flex-direction: column; overflow: hidden;
}

/* Header */
.log-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.log-title { font-size:1.2rem; margin:0; color:#0f172a; font-weight:700; letter-spacing:.2px; }
.log-close { background:none; border:none; font-size:20px; cursor:pointer; color:#475569; }
.log-close:hover { color:#0f172a; }

/* Body + layout */
.log-body { flex:1; overflow: hidden; }
.log-layout { display:flex; gap:20px; height:100%; align-items:flex-start; }

/* Sidebar: categories */
.log-sidebar { width: 170px; flex:0 0 170px; }
.log-subtitle { font-size:.95rem; font-weight:700; color:#0f172a; margin:2px 0 10px; }
.log-categories { display:flex; flex-direction:column; gap:8px; }
.log-cat-btn {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  font-size:.95rem; font-weight:600; color:#0f172a; background:#f8fafc; border:1px solid #e2e8f0;
  cursor:pointer; transition:all .15s ease;
}
.log-cat-btn:hover { background:#eef6ff; transform:translateY(-1px); }
.log-cat-btn.active { background:#e6f0ff; border-color:#93c5fd; }

/* Center: activities */
/* Narrower center column for activities; fixed width keeps it neat */
.log-main { flex:0 0 340px; min-width:340px; display:flex; flex-direction:column; }


.log-options {
  display:grid; grid-template-columns: 1fr; gap:10px;
  padding-right:6px; overflow:auto; max-height:65vh;
  scrollbar-width:thin; scrollbar-color: rgba(100,116,139,0.3) transparent;
}

.log-options::-webkit-scrollbar{ width:6px; } .log-options::-webkit-scrollbar-thumb{ background:rgba(100,116,139,0.3); border-radius:6px; }

.log-option {
  box-sizing: border-box;           /* prevent visual overflow */
  width: 100%;
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;                /* a few px bigger */
  min-height: 50px;
  border-radius:16px;
  background: rgba(255,255,255,0.72);
  border:1px solid #e2e8f0; cursor:pointer;
  font-size:.95rem; font-weight:700; color:#0f172a; transition:all .12s ease;
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
.log-option i { width:18px; text-align:center; }
.log-option:hover { background:rgba(248,250,252,0.9); transform:translateY(-1px); }
.log-option.active {
  outline: none;
  box-shadow: inset 0 0 0 2px #93c5fd;  /* ring inside so it never spills out */
  border-color:#93c5fd;
}



/* Inline form */
.log-inline-form {
  margin-top:10px; padding:12px;
  background: rgba(248,250,252,0.8);
  border:1px dashed #cbd5e1; border-radius:12px;
  backdrop-filter: blur(6px) saturate(120%);
}
.log-input-row { display:flex; align-items:center; gap:8px; width:100%; }
.log-input-row input {
  flex:1; padding:12px 14px; border:1px solid #cbd5e1; border-radius:12px; font-size:0.95rem;
  background:#fff; color:#0f172a;
}
.log-submit.small {
  padding:10px 14px; border-radius:12px; border:1px solid #e2e8f0;
  background:linear-gradient(90deg,#3b82f6,#60a5fa); color:#fff; font-weight:800; cursor:pointer;
}

.log-boolean-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.btn-chip {
  padding:8px 12px; border-radius:999px; border:1px solid #e2e8f0; background:#ffffff; cursor:pointer; font-weight:700;
}
.btn-chip.secondary { background:#f8fafc; }
.btn-chip:hover { background:#eef6ff; }
.btn-small {
  padding:7px 10px; border-radius:10px; border:1px solid #e2e8f0; background:#0ea5e9; color:#fff; font-weight:700; cursor:pointer;
}
.btn-small.secondary { background:#f1f5f9; color:#0f172a; }
.log-submit {
  margin-top:10px; background:linear-gradient(90deg,#3b82f6,#60a5fa); color:#fff; padding:10px 16px;
  border:none; border-radius:12px; font-weight:800; font-size:.95rem; cursor:pointer;
}
.log-submit:hover { filter:brightness(1.05); }

/* Right panel expands to fill remaining space */
.log-history { flex:1 1 auto; min-width:0; border-left:1px solid #e2e8f0; padding-left:12px; overflow-y: auto; overflow-x: hidden; max-height:65vh; }

.log-history-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.log-total { font-weight:800; color:#0f172a; background:#eef6ff; border:1px solid #dbeafe; border-radius:10px; padding:6px 10px; }

#log-history-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.log-item {
  display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
  flex-wrap: wrap;                 /* allows a new full-width row for the editor */
  overflow: hidden;                /* no horizontal bleed */
  background: rgba(255,255,255,0.78);
  border:1px solid #e2e8f0; border-radius:12px; padding:10px 12px;
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
}

.log-item-left  { flex: 1 1 auto; min-width: 0; }
.log-item-right { flex: 0 0 auto; }


.log-item-left { min-width:0; }
.log-item-title { font-weight:800; color:#0f172a; margin-bottom:2px; }
.log-item-meta { font-size:.85rem; color:#475569; display:flex; align-items:center; gap:6px; }
.log-item-meta .muted { color:#64748b; }
.log-item-meta .dot { opacity:.6; }
.log-item-right { display:flex; align-items:center; gap:6px; }
.points { font-weight:900; color:#14532d; background:#dcfce7; border:1px solid #bbf7d0; padding:4px 8px; border-radius:10px; }
.ghost-btn { background:#f8fafc; border:1px solid #e2e8f0; color:#0f172a; border-radius:10px; padding:6px 8px; cursor:pointer; }
.ghost-btn:hover { background:#eef6ff; }

.log-edit-row { margin-top:8px; }

/* Responsive */
@media (max-width: 900px) {
  .log-layout { flex-direction:column; }
  .log-sidebar, .log-history { width:100%; flex:none; border:none; padding:0; }
  .log-history { border-top:1px solid #e2e8f0; }
  .log-options { grid-template-columns: 1fr; max-height: 50vh; }
}


/* Click-to-edit value in history */
.log-item-meta .value {
  color:#0f172a; font-weight:800; cursor:pointer;
  padding:2px 6px; border-radius:8px; border:1px solid transparent;
}
.log-item-meta .value:hover {
  background:#eef6ff; border-color:#dbeafe;
}

/* Inline editor under the log item, same width as the list */
/* Full-width editor below the card's content */
.log-edit-row { margin-top:8px; width:100%; flex: 1 0 100%; }

/* Keep input + Save + Cancel on one line and within width */
.log-edit-row .log-input-row {
  display: grid;
  grid-template-columns: 1fr auto auto; /* input | Save | Cancel */
  gap: 8px;
  width: 100%;
}

.log-edit-row input {
  width: 100%;
  padding: 12px 14px;
  border:1px solid #cbd5e1; border-radius:12px; font-size:.95rem;
  background:#fff; color:#0f172a;
}

.btn-small {
  padding:9px 12px; border-radius:10px; border:1px solid #e2e8f0; background:#0ea5e9; color:#fff; font-weight:800; cursor:pointer;
}
.btn-small.secondary { background:#f1f5f9; color:#0f172a; }



.log-item-meta .value {
  color:#0f172a; font-weight:800; cursor:pointer;
  padding:2px 6px; border-radius:8px; border:1px solid transparent;
}
.log-item-meta .value:hover {
  background:#eef6ff; border-color:#dbeafe;
}
.log-item-meta .value .edit-hint {
  opacity:.45; margin-left:4px; font-size:.85em;
}
.log-item-meta .value:hover .edit-hint {
  opacity:.8;
}


.log-disabled {
  opacity: 0.4;
  cursor: not-allowed !important;
}


/* ===========================
   MOBILE LOG REDESIGN
   =========================== */

@media (max-width: 768px) {

  .log-modal {
    width: 94%;
    height: 94%;
    max-height: 95vh;
    border-radius: 22px;
    padding: 18px 16px;
  }

  .log-header {
    position: sticky;
    top: 0;
    background: rgba(255,255,255,0.98);
    z-index: 10;
    padding-bottom: 10px;
  }

  .log-layout {
    flex-direction: column;
    gap: 18px;
  }

  /* Move history visually to top */
  .log-history {
    order: -1;
    border: none;
    padding: 0;
    max-height: none;
  }

  .log-history-header {
    background: #f8fafc;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
  }

  #log-history-list {
    margin-top: 10px;
  }

  /* Categories horizontal scroll */
  .log-sidebar {
    width: 100%;
  }

  .log-categories {
    flex-direction: row;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .log-categories::-webkit-scrollbar {
    display: none;
  }

  .log-cat-btn {
    white-space: nowrap;
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  /* Activities full width */
  .log-main {
    flex: none;
    min-width: 100%;
  }

  .log-options {
    max-height: none;
    padding-right: 0;
  }

  .log-option {
    padding: 18px;
    font-size: 1rem;
  }

  /* Inline form improved spacing */
  .log-inline-form {
    margin-top: 12px;
  }

  .log-input-row {
    gap: 10px;
  }

  .log-input-row input {
    font-size: 1rem;
    padding: 14px;
  }

  .log-submit.small {
    padding: 12px 16px;
  }

}