/* History Graph minimalist styling */
.pf-graph__toolbar { color: #57606a; }
.pf-graph__toolbar .pf-btn { border-color: #d0d7de; color: #24292f; }
.pf-graph__legend { color: #57606a; }
/* Notifications: minimalist toasts */
.pf-toast-container { position: fixed; bottom: 16px; right: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.pf-toast { background-color: #161a1d; color: #e6e8ea; border: 1px solid #23272b; border-left: 4px solid #00d1b8; border-radius: 10px; padding: 12px 14px; min-width: 240px; max-width: 360px; box-shadow: 0 10px 24px rgba(0,0,0,0.24); opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.pf-toast--show { opacity: 1; transform: translateY(0); }
.pf-toast__title { font-weight: 600; font-size: 14px; margin-bottom: 4px; color: #e6e8ea; }
.pf-toast__body { font-size: 12px; color: #a2a8ad; }
.pf-toast__actions { margin-top: 8px; }
.pf-toast__btn { display:inline-block; background-color:#00d1b8; color:#0b0c0e; padding:6px 10px; border-radius:8px; text-decoration:none; font-weight:600; font-size:12px; }

/* Notification dropdown panel */
.pf-notif { min-width: 320px; max-width: 480px; }
.pf-notif__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.pf-notif__list { list-style:none; margin:0; padding:0; max-height:420px; overflow:auto; }
.pf-notif__empty { color:#7b8288; font-size:12px; text-align:center; padding:16px 4px; }
.pf-notif__item { display:flex; gap:10px; padding:10px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition: background-color .15s ease, border-color .15s ease; }
.pf-notif__item:hover { background:#f7f7f7; border-color:#e6e8ea; }
.pf-notif__dot { margin-top:6px; width:8px; height:8px; border-radius:999px; background:#cbd5e1; flex:0 0 auto; }
.pf-notif__item--unread .pf-notif__dot { background:#00d1b8; }
.pf-notif__content { min-width:0; flex:1 1 auto; }
.pf-notif__title { font-size:14px; font-weight:600; color:#0b0c0e; margin:0 0 2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-notif__body { font-size:12px; color:#7b8288; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-notif__meta { margin-top:4px; display:flex; align-items:center; gap:8px; font-size:11px; color:#a2a8ad; }
.pf-chip--link { display:inline-block; padding:2px 8px; border-radius:999px; background:#00d1b8; color:#0b0c0e; font-weight:600; font-size:11px; text-decoration:none; }
/* Chips: base + semantic variants for status tags */
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  color: #0b0c0e;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.pf-chip--sm { font-size: 11px; padding: 2px 6px; }
.pf-chip:focus-visible {
  outline: 2px solid var(--pf-accent);
  outline-offset: 2px;
}
.pf-chip__dot { width: 6px; height: 6px; border-radius: 9999px; }
.pf-chip--neutral { background: #f3f4f6; color: #111827; border-color: #e5e7eb; }
.pf-chip--success { background: rgba(34,197,94,0.15); color: #166534; border-color: rgba(34,197,94,0.35); }
.pf-chip--warning { background: rgba(245,158,11,0.15); color: #92400e; border-color: rgba(245,158,11,0.35); }
.pf-chip--error { background: rgba(239,68,68,0.15); color: #991b1b; border-color: rgba(239,68,68,0.35); }
.pf-chip--info { background: rgba(56,189,248,0.15); color: #075985; border-color: rgba(56,189,248,0.35); }

/* Discipline chips with exact brand colors (higher specificity to beat generic .pf-chip rules) */
.pf-chip.pf-chip--discipline-mechanical {
  background: #e5f0ff;
  color: #1f2937;
  border-color: transparent;
}
.pf-chip.pf-chip--discipline-electrical {
  background: #fef3c7;
  color: #92400e;
  border-color: transparent;
}
.pf-chip.pf-chip--discipline-firmware {
  background: #ede9fe;
  color: #5b21b6;
  border-color: transparent;
}
.pf-chip.pf-chip--discipline-documentation {
  background: #d1fae5;
  color: #065f46;
  border-color: transparent;
}

/* Selected/focus states for discipline chips */
.pf-chip.pf-chip--discipline-mechanical:focus-visible,
.pf-chip.pf-chip--discipline-mechanical.is-selected {
  border-color: #00d1b8;
}
.pf-chip.pf-chip--discipline-electrical:focus-visible,
.pf-chip.pf-chip--discipline-electrical.is-selected {
  border-color: #00d1b8;
}
.pf-chip.pf-chip--discipline-firmware:focus-visible,
.pf-chip.pf-chip--discipline-firmware.is-selected {
  border-color: #00d1b8;
}
.pf-chip.pf-chip--discipline-documentation:focus-visible,
.pf-chip.pf-chip--discipline-documentation.is-selected {
  border-color: #00d1b8;
}
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600;700&display=swap');
/* ProductFlo UI Theme */
:root {
	--pf-bg: #0b0c0e;
	--pf-surface: #121417;
	--pf-card: #161a1d;
	--pf-text: #e6e8ea;
	--pf-text-muted: #a2a8ad;
	--pf-text-soft: #7b8288;
	--pf-accent: #00d1b8;
	/* Darkened accent for accessible text on light backgrounds */
	--pf-accent-ink: #006f63;
	--pf-success: #22c55e;
	--pf-warning: #f59e0b;
	--pf-error: #ef4444;
	--pf-info: #38bdf8;
	
	/* Discipline colors - exact brand specifications */
	--pf-discipline-mechanical-bg: #e5f0ff;
	--pf-discipline-mechanical-text: #1f2937;
	--pf-discipline-electrical-bg: #fef3c7;
	--pf-discipline-electrical-text: #92400e;
	--pf-discipline-firmware-bg: #ede9fe;
	--pf-discipline-firmware-text: #5b21b6;
	--pf-discipline-documentation-bg: #d1fae5;
	--pf-discipline-documentation-text: #065f46;
	
	/* Spacing rhythm - 8px base */
	--pf-space-xs: 4px;
	--pf-space-sm: 8px;
	--pf-space-md: 16px;
	--pf-space-lg: 24px;
	--pf-space-xl: 32px;
}

html, body {
	color-scheme: dark light;
	font-family: "Jura", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
	/* Make viewport-based layouts predictable */
	height: 100%;
}

/* Core app layout: header + (optional mobile menu) + main (scrolls) + footer */
#coreSection { display: flex; flex-direction: column; min-height: 100dvh; max-height: 100dvh; overflow: hidden; }
#coreSection > header { flex: 0 0 auto; }
#coreSection > nav#mobileMenu { flex: 0 0 auto; }
#coreSection > section#mainApp { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#coreSection > footer { flex: 0 0 auto; }

/* Inside main: only the active app should scroll, others are display:none via .hidden */
#mainApp > #dashboardApp,
#mainApp > #workspaceApp,
#mainApp > #authApp { flex: 1 1 auto; min-height: 0; }
#mainApp > #workspaceApp,
#mainApp > #dashboardApp { overflow: hidden; }
#mainApp > #authApp { overflow: auto; }

/* Ensure app grids stretch fully and don't force extra scroll */
#workspaceApp, #dashboardApp { height: 100%; min-height: 0; }
#workspaceApp > *, #dashboardApp > * { min-height: 0; }

/* Make sidebar scroll independently if content overflows */
#sidebar { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
/* Ensure the utility class 'hidden' actually hides the sidebar despite the ID selector above */
#sidebar.hidden { display: none; }

/* Workspace main: viewer fills remaining height between header and details */
#mainContent { display: flex; flex-direction: column; min-height: 0; height: 100%; }
#viewerContainer { flex: 1 1 auto; min-height: 200px; overflow: hidden; aspect-ratio: auto !important; }
#viewerContainer > iframe { width: 100%; height: 100%; display: block; }

/* Viewer area docking for Details panel */
#viewerArea { display: flex; flex: 1 1 auto; min-height: 0; gap: 0; }
#viewerArea.details-dock-left { flex-direction: row; }
#viewerArea.details-dock-bottom { flex-direction: column; }

#viewerPanel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* Details panel */
.pf-details { background: #fff; border-top: 1px solid #e5e7eb; display: flex; flex-direction: column; overflow: auto; position: relative; z-index: 0; }
#viewerArea.details-dock-left .pf-details { border-top: none; border-left: 1px solid #e5e7eb; width: 380px; min-width: 320px; max-width: 480px; }
#viewerArea.details-dock-bottom .pf-details { width: 100%; flex: 0 0 auto; }

.pf-details__header { position: sticky; top: 0; z-index: 2; backdrop-filter: saturate(140%) blur(6px); -webkit-backdrop-filter: saturate(140%) blur(6px); background: rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #eef2f7; }
.pf-details__title { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: #111827; }
.pf-details__meta { display: inline-flex; align-items: center; gap: 6px; }
.pf-details__body { display: flex; flex-direction: column; gap: 12px; padding: 12px; overflow: auto; max-height: 40vh; }
#viewerArea.details-dock-left .pf-details__body { max-height: none; height: auto; }
.pf-details__compose { display: flex; align-items: center; gap: 8px; }

/* Collapsed state */
#viewerArea.details-collapsed .pf-details { display: none; }

@media (max-width: 768px) {
	#viewerArea { flex-direction: column; }
	#viewerArea.details-dock-left .pf-details { width: 100%; border-left: none; border-top: 1px solid #e5e7eb; }
	.pf-details__body { max-height: 35vh; }
}

/* Workspace Header: enable horizontal scroll on mobile for overflow controls */
@media (max-width: 768px) {
	#workspaceHeader {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start;
		gap: 8px;
	}
	#workspaceHeader > * {
		flex-shrink: 0;
	}
}

/* Comments list items */
.pf-comment-row { padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; transition: background 120ms ease, border-color 120ms ease; }
.pf-comment-row:hover { background: #f8fafc; border-color: #e5e7eb; }

/* Details: minimalist fields and helper text */
.pf-field { display: grid; gap: 6px; }
.pf-helper { font-size: 11px; color: #6b7280; }

/* Codes section */
.pf-code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-code-data { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 11px; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-code-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 768px) { .pf-code-grid { grid-template-columns: 1fr; } }

/* Make barcode SVG scale to container width */
#pf-bar { width: 100%; height: auto; display: block; }

/* Comments compose: tighter and elevated */
#commentsPanel .pf-details__compose { position: sticky; bottom: 0; padding: 10px 12px; background: rgba(255,255,255,0.9); backdrop-filter: blur(4px); border-top: 1px solid #eef2f7; }

/* Prefer our accent for focus outlines */
:focus-visible {
	outline: 2px solid var(--pf-accent);
	outline-offset: 2px;
}

.pf-text-accent { 
	color: var(--pf-accent); 
}

/* Buttons */
.pf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 14px;
	border-radius: 12px;
	border: 1px solid #1f2328;
	background: #0b0c0e;
	color: #e6e8ea;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 80ms ease, color 150ms ease;
}
.pf-btn:hover { border-color: #2a2f36; background: #111318; }
.pf-btn:active { transform: translateY(0.5px) scale(0.995); }
.pf-btn:disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(0.1); }
.pf-btn:focus-visible { box-shadow: 0 0 0 3px rgba(0,209,184,0.25); }

.pf-btn--primary {
	background: var(--pf-accent);
	color: #0b0c0e;
	border-color: transparent;
}
.pf-btn--primary:hover { background: #00b39f; }
.pf-btn--primary:active { background: #009d8d; }

/* Secondary / neutral */
.pf-btn--secondary { background: #111827; color: #e6e8ea; border-color: #1f2328; }
.pf-btn--secondary:hover { background: #151c27; border-color: #2a2f36;  color: #e6e8ea;}

/* Outline */
.pf-btn--outline { background: transparent; color: #0b0c0e; border-color: #94a3b8; }
.pf-btn--outline:hover { background: rgba(0, 209, 184, 0.12); border-color: var(--pf-accent); color: #0b0c0e; }

/* Ghost */
.pf-btn--ghost { background: transparent; color: var(--pf-accent-ink); border-color: transparent; }
.pf-btn--ghost:hover { background: rgba(0, 209, 184, 0.12); color: var(--pf-accent-ink); }

/* Danger */
.pf-btn--danger { background: var(--pf-error); color: #fff; border-color: transparent; }
.pf-btn--danger:hover { background: #dc2626; }
.pf-btn--danger:active { background: #b91c1c; }

/* Sizes */
.pf-btn--sm { height: 32px; padding: 0 10px; border-radius: 10px; font-size: 12px; }
.pf-btn--lg { height: 48px; padding: 0 16px; border-radius: 14px; font-size: 16px; }
.pf-btn--block { width: 100%; }

/* Extra small buttons (used for row actions) */
.pf-btn--xs { height: 26px; padding: 0 8px; border-radius: 8px; font-size: 12px; }

/* Icon buttons */
.pf-btn--icon { width: 40px; height: 40px; padding: 0; }
.pf-btn--icon-sm { width: 32px; height: 32px; padding: 0; }
.pf-btn__icon { width: 18px; height: 18px; display: inline-block; }

/* Loading state */
.pf-btn.is-loading { position: relative; pointer-events: none; opacity: 0.85; }
.pf-btn.is-loading::after {
	content: "";
	position: absolute;
	width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,0.6);
	border-top-color: rgba(255,255,255,1);
	border-radius: 999px;
	right: 10px; top: 50%; transform: translateY(-50%);
	animation: pf-spin 700ms linear infinite;
}

@keyframes pf-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Pills */
.pf-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	padding: 8px 8px;
	border-radius: 999px;
	border: 1px solid #1f2328;
	background: var(--pf-card);
	color: var(--pf-text-muted);
	overflow: hidden;
	max-width: 100px;
	text-overflow: ellipsis;
	white-space: normal;
	word-wrap: break-word;
	line-height: 1.2;
	min-height: 32px;
}

/* Smaller pill size for compact badges */
.pf-pill--sm { font-size: 11px; padding: 4px 8px; min-height: 22px; }

/* Pill variants for status semantics */
.pf-pill--ok { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.10); color: #16a34a; }
.pf-pill--warn { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.10); color: #b45309; }
.pf-pill--off { border-color: #e5e7eb; background: #f9fafb; color: #6b7280; }

/* Color-coded pill backgrounds when scripts toggle Tailwind text colors */
.pf-pill.text-green-500 { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.10); color: #16a34a; }
.pf-pill.text-red-500 { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.10); color: #b91c1b; }
.pf-pill.text-amber-500 { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.10); color: #b45309; }
.pf-pill.text-blue-500 { border-color: rgba(59,130,246,0.35); background: rgba(59,130,246,0.10); color: #1d4ed8; }

/* Status dot colors we may toggle via JS */
.pf-status { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
.pf-status--ok { background: #22c55e; }
.pf-status--warn { background: #f59e0b; }
.pf-status--err { background: #ef4444; }
.pf-status--off { background: #9ca3af; }

/* Utilities we can apply progressively alongside Tailwind during migration */
.pf-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }
.pf-card--dark { background: var(--pf-card); border-color: #1f2328; color: var(--pf-text); }

/* Tabs */
.pf-tabs { display: flex; gap: 8px; border-bottom: 1px solid #e5e7eb; }
.pf-tab { padding: 8px 12px; font-size: 14px; border-bottom: 2px solid transparent; cursor: pointer; color: #6b7280; }
.pf-tab--active { color: #111827; border-color: var(--pf-accent); }

/* Toasts */
.pf-toast-root { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.pf-toast { background: #111827; color: #e6e8ea; padding: 10px 12px; border-radius: 10px; border: 1px solid #1f2328; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }



/* Modal */
.pf-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 2000; animation: pf-fade-in 140ms ease-out; }
.pf-modal { background: #fff; color: #111827; border: 1px solid #e5e7eb; border-radius: 12px; width: 100%; max-width: 420px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.20); animation: pf-zoom-in 160ms ease-out; }
.pf-modal__actions { display: flex; justify-content: flex-end; gap: 8px; }
.pf-modal__header { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.pf-modal__title { font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
.pf-modal__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: rgba(0,209,184,0.12); color: var(--pf-accent-ink); }
.pf-modal__body { padding-top: 12px; color: #374151; font-size: 14px; line-height: 1.45; display: grid; gap: 12px; }
.pf-modal__footer { display: flex; gap: 8px; justify-content: flex-end; padding-top: 12px; border-top: 1px solid #f1f5f9; }
.pf-modal__close { background: transparent; border: none; padding: 0; cursor: pointer; color: #6b7280; }

@keyframes pf-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-zoom-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* Links */
.pf-link { color: var(--pf-accent); text-decoration: none; }
.pf-link:hover { text-decoration: underline; }

/* Buttons hover/focus refinements */
.pf-btn--primary { background: var(--pf-accent); color: #0b0c0e; border-color: transparent; }
.pf-btn--primary:hover { background: #00bda6; filter: none; }

/* Inputs and selects */
.pf-input,
.pf-select {
	height: 40px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #111827;
	transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

/* Small input size for compact toolbars */
.pf-input--sm { height: 32px; padding: 0 10px; border-radius: 10px; font-size: 12px; }

.pf-input:hover,
.pf-select:hover { border-color: #cbd5e1; }

.pf-input:focus,
.pf-select:focus {
	border-color: var(--pf-accent);
	box-shadow: 0 0 0 3px rgba(0, 209, 184, 0.25);
	outline: none;
}

.pf-input::placeholder { color: #9ca3af; }

/* Textarea */
.pf-textarea {
	min-height: 96px;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #111827;
	resize: vertical;
	transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.pf-textarea:hover { border-color: #cbd5e1; }
.pf-textarea:focus { border-color: var(--pf-accent); box-shadow: 0 0 0 3px rgba(0, 209, 184, 0.25); outline: none; }

/* Form field */
.pf-field { display: grid; gap: 6px; }
.pf-label { font-size: 12px; color: #6b7280; font-weight: 600; letter-spacing: 0.01em; }
.pf-preview { border: 1px dashed #e5e7eb; border-radius: 10px; padding: 10px; background: #fafafa; color: #111827; font-size: 13px; }
.pf-preview--compact { padding: 8px; font-size: 12px; }
/* Reply editor variant for light theme contexts */
.pf-editor { display: grid; gap: 8px; }
.pf-editor--reply { gap: 8px; }
.pf-textarea--reply { min-height: 72px; }
.pf-preview--reply { background: #f8fafc; border-color: #e5e7eb; }
@media (max-width: 480px) {
  .pf-editor__actions { flex-wrap: wrap; gap: 6px; }
  .pf-btn--xs { flex: 1 1 auto; }
}

/* Material Symbols - Import from Google Fonts CDN */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Material Symbols sizing helpers */
.material-symbols-outlined,
.material-icons-outlined { 
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; 
  vertical-align: middle; 
  font-size: 16px; 
  line-height: 1;
  user-select: none;
}
.pf-icon--sm { font-size: 18px; line-height: 1; }
.pf-icon--xs { font-size: 16px; line-height: 1; }
.pf-icon--lg { font-size: 24px; line-height: 1; }

/* Icon-only buttons need proper tooltip support */
.pf-btn--icon[title] {
  position: relative;
}
.pf-btn--icon[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  margin-bottom: 4px;
}

/* Responsive design improvements */
@media (max-width: 768px) {
  .pf-chip {
    font-size: 11px;
    padding: 2px 6px;
  }
  
  .pf-btn {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }
  
  .pf-btn--xs {
    height: 24px;
    padding: 0 6px;
    font-size: 11px;
  }
  
  .pf-input {
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
  }
  
  .material-symbols-outlined {
    font-size: 18px;
  }
  
  .pf-icon--xs {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .pf-chip {
    font-size: 10px;
    padding: 2px 4px;
  }
  
  .pf-btn {
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
  }
  
  .pf-input {
    height: 32px;
    font-size: 13px;
  }
}

/* File list rows */
.pf-file-row { padding: 8px 8px; border-radius: 10px; transition: background 120ms ease, box-shadow 120ms ease; }
.pf-file-row:hover { background: rgba(0, 209, 184, 0.07); }
.pf-file-row:focus-visible { outline: 2px solid rgba(0, 209, 184, 0.4); outline-offset: 2px; }
.pf-file-actions { opacity: 0; transition: opacity 120ms ease; }
.pf-file-row:hover .pf-file-actions, .pf-file-row:focus-within .pf-file-actions { opacity: 1; }
.pf-file-meta { color: #6b7280; }

/* Documentation helpers */
.doc-wrap { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
.doc-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; }
.doc-h2 { font-size: 20px; font-weight: 600; margin: 16px 0 12px; }
.doc-h3 { font-size: 16px; font-weight: 600; margin: 14px 0 10px; }
.doc-p { font-size: 14px; line-height: 1.6; color: #374151; }
.doc-li { font-size: 14px; line-height: 1.6; color: #374151; }
.doc-k { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 6px; padding: 2px 6px; }
.doc-table { width: 100%; border-collapse: collapse; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.doc-table th, .doc-table td { text-align: left; font-size: 13px; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.doc-table thead th { background: #f8fafc; color: #111827; font-weight: 600; }
.doc-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.doc-badge--get { background: rgba(56,189,248,0.15); color: #0284c7; }
.doc-badge--post { background: rgba(34,197,94,0.15); color: #166534; }
.doc-badge--delete { background: rgba(239,68,68,0.15); color: #991b1b; }
.doc-muted { color: #6b7280; }
.doc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.doc-nav { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.doc-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.doc-logo__img { height: 32px; width: auto; }
.doc-logo__text { font-size: 20px; font-weight: 700; color: #0b0c0e; }
.doc-stack { display: flex; flex-direction: column; gap: 24px; }

/* History: Git-style timeline and graph */
.pf-timeline { position: relative; }
.pf-timeline__list { position: relative; border-left: 2px solid #e5e7eb; padding-left: 10px; }
.pf-timeline__item { position: relative; display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding: 6px 0; margin-left: -10px; }
.pf-timeline__item.is-active .pf-timeline__title { color: #111827; }
.pf-timeline__node { width: 12px; height: 12px; border-radius: 999px; background: #9ca3af; border: 2px solid #fff; box-shadow: 0 0 0 2px #e5e7eb; cursor: pointer; align-self: center; justify-self: center; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.pf-timeline__node.is-latest { background: var(--pf-accent); box-shadow: 0 0 0 2px rgba(0,209,184,0.35); }
.pf-timeline__item.is-active .pf-timeline__node { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(0,209,184,0.25); }
.pf-timeline__node:focus-visible { outline: 2px solid var(--pf-accent); outline-offset: 2px; }
.pf-timeline__content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-timeline__title { font-size: 14px; font-weight: 600; color: #1f2937; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-timeline__meta { font-size: 12px; color: #6b7280; }

.pf-graph { --pf-graph-line: #e5e7eb; position: relative; }
.pf-graph__node { fill: #9ca3af; stroke: #ffffff; stroke-width: 2; cursor: pointer; transition: transform 120ms ease, filter 120ms ease, fill 120ms ease; }
.pf-graph__node.is-latest { fill: var(--pf-accent); }
.pf-graph__node.is-active { filter: drop-shadow(0 0 6px rgba(0,209,184,0.45)); transform: scale(1.05); }

/* Ensure date input calendar icon is visible on light backgrounds */
.pf-input[type="date"] { color-scheme: light; }
.pf-input[type="date"]::-webkit-calendar-picker-indicator {
	filter: invert(1);
	opacity: 0.9;
}

/* Badges */
.pf-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 9999px; font-size: 11px; font-weight: 600; line-height: 1; }
.pf-badge--teal { background: rgba(0, 209, 184, 0.15); color: #00d1b8; }
.pf-badge__dot { width: 6px; height: 6px; border-radius: 9999px; }
.pf-badge__dot--teal { background: #00d1b8; }

/* Comments panel reply threading connectors */
.pf-thread-reply { position: relative; }
.pf-thread-reply .pf-reply-connector { position: absolute; left: -8px; top: 0; bottom: 0; width: 12px; }
.pf-thread-reply .pf-reply-connector::before { content: ""; position: absolute; left: 6px; top: -8px; bottom: -8px; width: 2px; background: #e5e7eb; }
.pf-thread-reply .pf-reply-connector::after { content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 10px; border-radius: 999px; background: #e5e7eb; }

/* Inline reply editor char counter */
.pf-char { font-size: 11px; color: #6b7280; margin-right: auto; }

/* Branch UI accents */
.pf-pill--accent { background-color: #00d1b8; color: #0b0c0e; }
.pf-branch-badge { background-color: #e6fffb; color: #006b61; border-radius: 9999px; padding: 2px 8px; font-size: 12px; font-weight: 600; }

/* Header dropdown panels should layer above sticky details headers/content */
#usersPanel,
#notifPanel,
#workspacePanel,
#accountPanel { z-index: 100; }