/* Taskey — additions for the HTML/CSS/JS version.
   Utility classes the Django templates used but techpanda.css never defined,
   plus styles for toasts, backup tools and field errors. */

.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--brand-primary) !important; }
.p-0 { padding: 0 !important; }
.p-4 { padding: 24px !important; }
.ml-1 { margin-left: 6px; }

.badge-primary { background: var(--brand-primary-subtle); color: var(--brand-primary); }
.badge-secondary { background: var(--bg-subtle); color: var(--text-secondary); }
.badge-xs { font-size: 10px; padding: 1px 6px; }

.form-checkbox { width: 16px; height: 16px; accent-color: var(--brand-primary); cursor: pointer; }
.form-file-input { display: block; width: 100%; font-size: 13px; color: var(--text-secondary); padding: 8px; border: 1px dashed var(--border-color); border-radius: var(--radius-md); background: var(--bg-subtle); }

.app-toast {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--brand-primary);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  min-width: 280px;
  max-width: 360px;
  color: var(--text-primary);
  pointer-events: auto;
  font-size: 13px;
  transition: all 0.25s ease;
}

.attachment-current { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-bottom: 8px; }

/* Two-column task detail collapses on small screens */
.task-detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .task-detail-grid { grid-template-columns: 1fr; } }

/* Form grids collapse on phones */
.form-grid-2-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-grid-2-inline { grid-template-columns: 1fr; } }

.data-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.storage-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }

/* Header never pushes the page sideways on phones: long titles get an ellipsis */
.header-left { min-width: 0; flex: 1 1 auto; }
.header-title-block { min-width: 0; }
.header-title-block h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-right { flex-shrink: 0; }
@media (max-width: 600px) {
  .header-right { gap: 8px; }
  .header-credit-pill .credit-label { display: none; }
  .header-title-block h1 { font-size: 15px; }
}
/* Long words in task titles / instructions wrap instead of overflowing */
.content-body h1, .timeline-message, .task-cell-title, .task-queue-title { overflow-wrap: anywhere; }

/* Google Sheet sync status (bottom-left) and first-load overlay */
.sheet-sync-pill {
  position: fixed; left: 14px; bottom: 14px; z-index: 9998;
  display: inline-flex; align-items: center; gap: 6px; max-width: calc(100vw - 28px);
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; text-decoration: none;
  background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border-color); box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,.12));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sheet-sync-pill span { overflow: hidden; text-overflow: ellipsis; }
.sheet-sync-pill[data-state="ok"] i { color: #10B981; }
.sheet-sync-pill[data-state="busy"] i { color: var(--brand-primary); }
.sheet-sync-pill[data-state="warn"] { border-color: #F59E0B; } .sheet-sync-pill[data-state="warn"] i { color: #D97706; }
.sheet-sync-pill[data-state="err"] { border-color: #EF4444; color: #B91C1C; }
.sheet-sync-pill[data-state="local"] i { color: var(--text-muted); }
.sheet-sync-pill:hover { color: var(--text-primary); }
@media (max-width: 600px) { .sheet-sync-pill { bottom: 8px; left: 8px; font-size: 11px; } }
.sheet-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg-body, #f4f5f7); }
.sheet-loader-box { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-secondary); font-size: 14px; }
.sheet-loader-box i { font-size: 28px; color: var(--brand-primary); }