/* tasklog.css
   Task Log UI (LEFT SIDE ONLY)
   Keep Task Log styles scoped to the Task Log container/IDs to avoid impacting right-side panels.
*/

/* Task Log panel fills the left half and controls its own overflow */
#task-log-section {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header: title/actions row + search row (mirrors Call Log / Client Log layout) */
#task-log-section .tasklog-titlebar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Left and right action areas (mirrors Client Log / Call Log) */
#task-log-section .tasklog-titlebar-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

#task-log-section .tasklog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

/* === Modern Header Action Buttons (Step 8) === */

#show-completed-tasks-button,
#add-task-button {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  padding: 6px 8px;
  border-radius: 10px;
  transition: all 0.18s ease;
}

#show-completed-tasks-button:hover,
#add-task-button:hover {
  background: rgba(37,99,235,0.08);
  transform: translateY(-2px);
}

#show-completed-tasks-button .plus,
#add-task-button .plus {
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
}

#show-completed-tasks-button .plus svg {
  display: block;
}

#show-completed-tasks-button .label,
#add-task-button .label {
  font-size: 12px;
  line-height: 14px;
  white-space: nowrap;
}

#task-log-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
}

#task-log-section .tasklog-searchrow {
  margin-top: 8px;
}

/* === Modern Search Input (Step 7) === */

#task-search-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  font-size: 14px;
  box-sizing: border-box;
  background: #f9fafb;
  transition: all 0.18s ease;
  text-align: center; 
}

#task-search-input:focus {
  outline: none;
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

/* ==========================
   Task Log: Add Task Modal
   ========================== */

#tasklog-add-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 2100;
}

#tasklog-add-modal.hidden {
  display: none !important;
}

#tasklog-add-modal .modal-content {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 2.25rem 2rem 1.75rem 2rem;
  width: 100%;
  max-width: 420px;
  min-width: 300px;
  position: relative;
  text-align: left;
}

#tasklog-add-modal .modal-content h2 {
  margin: 0 0 1rem 0;
  font-size: 20px;
}

#tasklog-add-modal label {
  display: block;
  margin-top: 0.9rem;
  margin-bottom: 0.35rem;
  font-weight: 600;
  font-size: 13px;
}

#tasklog-add-modal input[type="text"],
#tasklog-add-modal input[type="date"],
#tasklog-add-modal select {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 0.55rem 0.6rem;
  font-size: 14px;
  box-sizing: border-box;
}

#tasklog-add-modal .button-group {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

#tasklog-add-modal .button-group button {
  border: none;
  border-radius: 8px;
  padding: 0.65rem 1rem;
  cursor: pointer;
}

/* Main body: list + detail */
#task-log-section .tasklog-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 45% 55%;
  border-top: 1px solid rgba(0,0,0,0.08);
}

#task-list-pane {
  min-height: 0;
  overflow: auto;
  padding: 12px;
}

#task-detail-pane {
  min-height: 0;
  overflow: auto;
  padding: 12px;
  border-left: 1px solid rgba(0,0,0,0.10);
}

/* Empty placeholders */
.tasklog-empty,
.tasklog-detail-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #444;
  gap: 6px;
}

.tasklog-empty-title,
.tasklog-detail-title {
  font-size: 16px;
  font-weight: 700;
}

.tasklog-empty-sub,
.tasklog-detail-sub {
  font-size: 13px;
  color: #666;
  max-width: 320px;
}

/* ==========================
   Task list items
   ========================== */

.tasklog-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tasklog-item {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 10px 10px;
  cursor: pointer;
  background: #fff;
}

.tasklog-item {
  transition: all 0.18s ease;
}

.tasklog-item:hover {
  border-color: rgba(0,0,0,0.18);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.tasklog-item.is-selected {
  outline: 2px solid rgba(0,0,0,0.25);
  outline-offset: 0;
}

/* Waiting state: purple outline in the inbox */
.tasklog-item.is-waiting {
  border: 2px solid rebeccapurple;
}
.tasklog-item.is-waiting:hover {
  border-color: rebeccapurple;
}

.tasklog-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tasklog-item-title {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  min-width: 0;
}

.tasklog-item-title .tasklog-item-title-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tasklog-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tasklog-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);
  white-space: nowrap;
}

/* === Modern Status Badges (Step 5) === */

.tasklog-badge[data-badge="overdue"] {
  background: rgba(220,38,38,0.08);
  color: #dc2626;
  border-color: rgba(220,38,38,0.25);
  font-weight: 600;
}

.tasklog-badge[data-badge="today"] {
  background: rgba(245,158,11,0.08);
  color: #f59e0b;
  border-color: rgba(245,158,11,0.25);
  font-weight: 600;
}

.tasklog-badge[data-badge="future"] {
  background: rgba(37,99,235,0.08);
  color: #2563eb;
  border-color: rgba(37,99,235,0.25);
  font-weight: 600;
}

.tasklog-badge[data-badge="completed"] {
  background: rgba(16,185,129,0.08);
  color: #10b981;
  border-color: rgba(16,185,129,0.25);
  font-weight: 600;
}

.tasklog-item-sub {
  margin-top: 6px;
  font-size: 12px;
  color: #666;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tasklog-muted {
  color: #777;
}

/* ==========================
   Task detail
   ========================== */

.tasklog-detail {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.tasklog-detail-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tasklog-detail-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}

.tasklog-detail-task-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.tasklog-detail-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

/* Waiting toggle (Task Log only) */
.tasklog-waiting-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(102, 51, 153, 0.06);
}

.tasklog-waiting-text {
  font-size: 12px;
  font-weight: 700;
  color: rebeccapurple;
  user-select: none;
}

.tasklog-switch {
  position: relative;
  width: 38px;
  height: 20px;
  display: inline-block;
}

.tasklog-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.tasklog-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  transition: 0.15s ease;
}

.tasklog-slider:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  top: 1px;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  transition: 0.15s ease;
}

.tasklog-switch input:checked + .tasklog-slider {
  border-color: rebeccapurple;
}

.tasklog-switch input:checked + .tasklog-slider:before {
  transform: translateX(18px);
  background: rebeccapurple;
}

.tasklog-mini-btn {
  border: 1px solid rgba(0,0,0,0.15);
  background: #fff;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}

/* === Primary Complete Button (Step 4) === */

#tasklog-complete {
  background: #2563eb;
  color: #ffffff;
  border: none;
  font-weight: 600;
  padding: 6px 14px;
}

#tasklog-complete:hover {
  background: #1e40af;
  box-shadow: 0 6px 14px rgba(37,99,235,0.25);
}

.tasklog-mini-btn:hover {
  border-color: rgba(0,0,0,0.25);
}

.tasklog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #666;
}

.tasklog-notes {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tasklog-notes-title {
  font-weight: 800;
  font-size: 13px;
}

.tasklog-note {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.015);
}

.tasklog-note-time {
  font-size: 11px;
  color: #777;
  margin-bottom: 4px;
}

.tasklog-note-text {
  font-size: 13px;
  white-space: pre-wrap;
}

.tasklog-add-note {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tasklog-add-note textarea {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  box-sizing: border-box;
}

.tasklog-add-note-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.tasklog-small-help {
  font-size: 12px;
  color: #666;
}

/* ===== Task Log Modal (Link Client + Add Task) ===== */
.tasklog-modal.hidden { display: none; }
.tasklog-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.tasklog-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
.tasklog-modal__dialog { position: relative; width: min(520px, 92vw); max-height: 80vh; overflow: hidden; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); display: flex; flex-direction: column; }
.tasklog-modal__header { padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tasklog-modal__title { font-weight: 700; }
.tasklog-modal__close { border: none; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; }
.tasklog-modal__body { padding: 12px 14px; overflow: auto; }
.tasklog-modal__footer { padding: 12px 14px; border-top: 1px solid rgba(0,0,0,0.08); display: flex; justify-content: flex-end; gap: 10px; }

.tasklog-input { width: 100%; padding: 10px 10px; border: 1px solid rgba(0,0,0,0.16); border-radius: 10px; box-sizing: border-box; }
.tasklog-client-results { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.tasklog-client-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; cursor: pointer; }
.tasklog-client-row:hover { background: rgba(0,0,0,0.03); }
.tasklog-client-name { font-weight: 600; }
.tasklog-client-sub { font-size: 12px; opacity: 0.7; }


/* ===== Task Log: Completed lock indicators (Step A) ===== */
.tasklog-locked-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.25rem 0.5rem;
  border-radius:0.5rem;
  border:1px solid rgba(0,0,0,0.15);
  font-size:0.75rem;
  font-weight:600;
  line-height:1;
  user-select:none;
}

.tasklog-add-note--locked{
  opacity:0.9;
}

/* ===== Completed Tasks full-page view (Step B) ===== */
#completed-tasks-page{
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #fff;
  overflow: auto;
  padding: 14px;
  box-sizing: border-box;
}

#completed-tasks-page.hidden{ display: none; }

.tasklog-page-header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.tasklog-page-header h2{
  margin: 0;
  text-align: center;
  font-size: 20px;
}

#search-completed-tasks-input{
  grid-column: 1 / -1;
  width: 100%;
  padding: 10px 10px;
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 10px;
  box-sizing: border-box;
}

.tasklog-page-table{
  width: 100%;
  border-collapse: collapse;
}

.tasklog-page-table thead th{
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  white-space: nowrap;
}

.tasklog-page-table tbody td{
  padding: 10px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  vertical-align: top;
}

.tasklog-restore-btn{
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 600;
}

.tasklog-restore-btn:hover{ background: rgba(0,0,0,0.03); }

.tasklog-col-title{ width: 38%; }
.tasklog-col-client{ width: 18%; }
.tasklog-col-due{ width: 14%; }
.tasklog-col-done{ width: 14%; }
.tasklog-col-action{ width: 16%; }

/* ===== Task Story full-page view (read-only) ===== */
#tasklog-story-page{
  position: fixed;
  inset: 0;
  z-index: 9100; /* above completed page */
  background: #fff;
  overflow: auto;
  padding: 14px;
  box-sizing: border-box;
}

#tasklog-story-page.hidden{ display: none; }

.tasklog-story-meta{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
  font-size: 0.95rem;
}

.tasklog-story-meta .tasklog-story-meta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  line-height: 1.3;
}

.tasklog-story-notes{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 12px;
}

.tasklog-story-notes-title{
  font-weight: 800;
  margin-bottom: 8px;
}

.tasklog-story-note{
  border-top: 1px solid rgba(0,0,0,0.08);
  padding: 10px 0;
}

.tasklog-story-note:first-child{
  border-top: none;
  padding-top: 0;
}

.tasklog-story-note-time{
  font-size: 0.8rem;
  opacity: 0.75;
  margin-bottom: 4px;
}

.tasklog-story-note-text{
  white-space: pre-wrap;
}

.tasklog-view-story-btn{
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 600;
  margin-right: 8px;
}

.tasklog-view-story-btn:hover{ background: rgba(0,0,0,0.03); }


/* Header buttons (icon over label) */
#show-completed-tasks-button,
#add-task-button {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

#show-completed-tasks-button .plus,
#add-task-button .plus {
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
}

#show-completed-tasks-button .plus svg {
  display: block;
}

#show-completed-tasks-button .label,
#add-task-button .label {
  font-size: 12px;
  line-height: 14px;
  white-space: nowrap;
}